import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import OrderNumberCount from '../../components/OrderNumberCount';
import OrderAreaRadioGroup from '../../components/OrderAreaRadioGroup1';
import CommonLoading from '@/components/CommonLoading';
import { useEffect, useState } from 'react';
import { Form } from 'antd';
import { updateOrderStatus } from '../../utils/orderStatus';
import { Button } from 'antd';
import IconFont from '@/components/IconFont';
import { useNavigate } from "react-router-dom";

/** 物流回传 */
function LogisticsBackhaulModal(props) {
	const { item, selectKeys, orderList, searchForm, handleOk, handleCancel } = props;
	const { scene } = item;
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);
	const [open, setOpen] = useState(false);
	const [form] = Form.useForm();
	const [orderData, setOrderData] = useState([]);

	const [showNumber, setShowNumber] = useState({});

	const navigate = useNavigate();

	useEffect(() => {
		setOpen(true);
	}, [])

	const orderAreaRadioProps = {
		searchForm,
		selectKeys,
		orderList,
        title: '支持所有状态的订单',
		states: [10, 20, 30, 40],
		updateShowNumer(obj, data) {
			setShowNumber(obj);
			setOrderData(data);
		}
	}

	const onOk = () => {
		setLoading(true);
		updateOrderStatus(scene, {
			orderIds: orderData,
		}, (val) => {
			setLoading(false);
			if (val) {
				setIsOk(true);
				setOpen(false);
			}
		})
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			handleOk()
		} else {
			handleCancel();
		}
	}

	return (
		<CommonModal 
			title={{ title: '物流回传' }} 
			open={open} 
			afterClose={afterClose}  
			width="530px" 
			onOk={onOk} 
			onCancel={onCancel}
			footer={[
				<div key="footer" style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
					<Button type="text" onClick={() => {navigate('/views/order/rule', { state: { tabKey: '5' }}); onCancel()}}>
						<IconFont type="icona-lujing12" />
						物流回传设置
					</Button>
					<div>
						<Button onClick={onCancel}>取消</Button>
						<Button type="primary" onClick={onOk}>确定</Button>
					</div>
				</div>
			]}
		>
			<CommonForm
				formProps={{
					form,
				}}
				columns={[
					{
						name: 'radio-group',
						slot: <OrderAreaRadioGroup wrapStyle={{ marginTop: 16 }} {...orderAreaRadioProps} />,
					},
					{
						block: (
							<>
								<OrderNumberCount
									data={[
										{ label: '待审核', value: showNumber[10] },
										{ label: '异常', value: showNumber[30], type: 'error' },
										{ label: '待发货', value: showNumber[20], type: 'warning' },
										{ label: '已发货', value: showNumber[40], type: 'success' },
									]}
								/>
								<div style={{ marginTop: 16 }}>确定对上述订单进行物流回传吗？</div>
							</>
						),
					},
				]}
			></CommonForm>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default LogisticsBackhaulModal;
